import React from "react";

import CheckCircleIcon from "@material-ui/icons/CheckCircle";

export interface CardAccountItemProps {
  cardType: string;
  cardShaba: string;
  isCardVerified: boolean;
}

const CardAccountItem: React.SFC<CardAccountItemProps> = (props: any) => {
  const { isCardVerified, cardType, cardShaba } = props;
  const cardBackground = require(`./../../../assets/images/BankAccounts/cardBackground.svg`);
  const cardIcon = require(`./../../../assets/images/BankAccounts/${cardType}CardIcon.svg`);

  return (
    <>
      <div className="card-item">
        {isCardVerified && (
          <CheckCircleIcon
            className="check-icon text-success"
            fontSize="large"
          />
        )}
        <div className="card-title">
          <img src={cardIcon} alt="card-icon" />
          {isCardVerified ? (
            <div className="text-success font-size-md card-toggle">
              Verified
            </div>
          ) : (
            <div className="text-danger font-size-md card-toggle">
              Not Verified
            </div>
          )}
        </div>
        <div className="detail-box">
          <img
            src={cardBackground}
            alt="box-background"
            className="background-img"
          />

          <div className="card-detail">
            <div className="font-size-xl">10.655413.1</div>
            <div className="font-size-lg">{cardShaba}</div>
          </div>
        </div>
      </div>
    </>
  );
};

export default CardAccountItem;
